<template>
    <div class="z-list-up-down">
        <!--<ul class="z-list-up-down-ul">
            <li class="z-list-up-down-li">-->
            <div class="z-list-up-down-cont" :class="borderClass">
                <div class="list-up clearfix">
                    <span class="list-up-left">
                        <slot name="zlst-list-up-left"></slot>
                    </span>
                    <span class="list-up-right">
                        <slot name="zlst-list-up-right"></slot>
                    </span>
                </div>
                <div class="list-down clearfix">
                    <span class="list-down-left">
                        <slot name="zlst-list-down-left"></slot>
                    </span>
                    <span class="list-down-right">
                        <slot name="zlst-list-down-right"></slot>
                    </span>
                </div>
            </div>
            <!--</li>
        </ul>-->
    </div>
</template>
<script>
    export default {
        name:'zListUpDown',
        props: {
            'border-style': {
                type: String,
                default: 'dashed'
            },
        },
        computed: {
            borderClass: function () {
                return 'border-' + this.borderStyle
            }
        }
    }
</script>
